<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!-- x-editable -->
<link th:href="@{/ajax/libs/bootstrap-editable/css/bootstrap-editable.css}" rel="stylesheet"/>
<!-- Data Tables -->
<link th:href="@{/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet"/>
<style>
    td input{
        width: 100%;
        line-height: 1.5;
        vertical-align: top;
        border-top: 2px solid #f7f7f7; /*边框颜色*/
        outline:none;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-purchases-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">domesticExpressNumber：</label>
            <div class="col-sm-8">
                <input id="chinaExpressNo" name="chinaExpressNo" class="form-control" type="text" autocomplete="off">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span class="must_be_color">*</span>domestic Express：</label>
            <div class="col-sm-8">
                <select class="form-control" id="chinaExpressCompanyID" name="chinaExpressCompanyID"
                        th:with="type=${@dict.getType('erp_domestic_courier')}">
                    <option th:each="dict : ${type}" th:text="${dict['dictLabel']}"
                            th:value="${dict['dictValue']}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span class="must_be_color">*</span>domestic warehouse：</label>
            <div class="col-sm-8">
                <select class="form-control" id="chinaStorageID" name="chinaStorageID"
                        th:with="type=${@dict.getType('erp_domestic_warehouse')}">
                    <option th:each="dict : ${type}" th:text="${dict['dictLabel']}"
                            th:value="${dict['dictValue']}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="ibox-content">
                <div class="">
                    <a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">add one line</a>
                </div>
                <table data-height="100%" data-show-columns="true" data-mobile-responsive="true" class="table table-striped table-bordered table-hover text-nowrap" id="editable">
                    <thead>
                    <tr>
                        <th width="40%">product sku*</th>
                        <th width="40%">product name</th>
                        <th width="20%">purchase amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="gradeX">
                        <td>
                            <input class="mainSku" onblur="blur_last($(this))" type="text">
                            <input name="productId" class="productId" type="hidden">
                        </td>
                        <td></td>
                        <td><input onblur="blur_next($(this))" class="purchaseQuantity" value="0" type="text"></td>
                    </tr>
                    <tr class="gradeX">
                        <td>
                            <input class="mainSku" onblur="blur_last($(this))" type="text">
                            <input name="productId" class="productId" type="hidden">
                        </td>
                        <td></td>
                        <td><input onblur="blur_next($(this))" class="purchaseQuantity" value="0" type="text"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">submit</button>
                <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
            </div>
        </div>

    </form>
</div>
<div th:include="include::footer"></div>
<!--<script th:src="@{/ajax/libs/select/select2.js}"></script>-->
<script th:src="@{/js/plugins/jeditable/jquery.jeditable.js}"></script>
<script th:src="@{/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script th:src="@{/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "module/purchases"
    $("#form-purchases-add").validate({
        /*submitHandler: function (form) {
            //$.operate.save(prefix + "/add", $('#form-purchases-add').serialize());
        }*/
        rules: {
            chinaExpressNo: {
                required: true,
            }
        },
        messages: {
            "chinaExpressNo": {
                remote: "The express number cannot be empty！"
            }
        },
        submitHandler: function (form) {
            add();
        }
    });

    function add() {
        var chinaExpressNo = $("input[name='chinaExpressNo']").val();
        var chinaExpressCompanyID = $("#chinaExpressCompanyID option:selected").val();
        var chinaStorageID = $("#chinaStorageID option:selected").val();

        //获取表格数据

        var productIdList = new Array();
        var purchaseQuantityList = new Array();



       for (var i=0; i<$("#editable tr").length-1; i++){

           var productId_tem = $(".productId").eq(i).val();
           var product_state_tem = $(".product_state").eq(i).text();
           var purchaseQuantity_tem = $(".purchaseQuantity").eq(i).val();

           if (!objIsNull(purchaseQuantity_tem) || !objIsNull(productId_tem)){
               continue;
           }
           console.log("i:"+i)
           console.log(productId_tem)
           console.log(product_state_tem)
           console.log(purchaseQuantity_tem)

           productIdList.push(productId_tem);
           purchaseQuantityList.push(purchaseQuantity_tem);
       }

       if (productIdList == ''){
           parent.layer.msg('Please check the sku！');
           return
       }

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "module/purchases/add",
            data : {
                "chinaExpressNo" : chinaExpressNo,
                "chinaExpressCompanyID" : chinaExpressCompanyID,
                "chinaStorageID" : chinaStorageID,
                "productIdList" : productIdList,
                "purchaseQuantityList" : purchaseQuantityList
            },
            async : false,
            error : function(request) {
                $.modal.alertError("system error");
            },
            success : function(data) {
                $.operate.saveSuccess(data);
            }
        });
    }

    /*添加一行*/
    function fnClickAddRow() {
        $('#editable').append("<tr class=\"gradeX\">\n" +
            "                        <td>\n" +
            "                            <input class=\"mainSku\" onblur=\"blur_last($(this))\" type=\"text\">\n" +
            "                            <input name=\"productId\" class=\"productId\" type=\"hidden\">\n" +
            "                        </td>\n" +
            "                        <td></td>\n" +
            "                        <td><input onblur=\"blur_next($(this))\" class=\"purchaseQuantity\" type=\"text\"></td>\n" +
            "                    </tr>")
    }

    /*校验mainsku*/
    function blur_last (_this) {
        var mainSKU = _this.val().trim();
            $.ajax({
                cache: true,
                type: "POST",
                url: ctx + "module/products/selectProductByMainSKU",
                data: {
                    "mainSKU": mainSKU,
                },
                async: false,
                error: function (request) {
                },
                success: function (data) {
                    if (data != ''){
                        _this.next().val(data.id);
                        _this.parent().next().html("<span class='product_state' style='color: green'>"+data.productName+"</span>")
                    }else {
                        _this.next().val("");
                        _this.parent().next().html("<span class='product_state' style='color: red'>X</span>")
                    }
                }
            });
    }

    /*如果最后一行为空则加一行*/
    function blur_next (_this) {
        var r = /^\+?[1-9][0-9]*$/;　　//正整数
        if (!r.test(_this.val())){
            _this.val('0')
        }
        var last_mainSKU = $("#editable tr:last td:first").find(".mainSku").val();
        if (last_mainSKU == ''){
            //fnClickAddRow();
        }
    }
</script>
</body>
</html>
